<!--
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-05-17 22:48:58
 * @LastEditTime: 2022-05-20 22:25:37
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description:文章排名
-->
<template>
  <div class="article-ranking-container">
    <el-card class="header">
      <div class="dynamic-box">
        <span class="title">动态展示</span>
        <el-checkbox-group v-model="checkedData">
          <el-checkbox
            v-for="i,k in dynamicData"
            :key="k"
            :label="i.label"
          ></el-checkbox>
        </el-checkbox-group>
      </div>
    </el-card>
    <el-card>
      <el-table
        ref="tableRef"
        row-key="_id"
        border
        :data="articleData"
      >
        <el-table-column
          v-for="i,k in tableColumn"
          :key="k"
          :label="i.label"
          :prop="i.prop"
        >
          <template
            #default="{row}"
            v-if="i.prop==='publicDate'"
          >
            {{$filters.relativeTime(row.publicDate)}}
          </template>
          <template
            #default="{row}"
            v-else-if="i.prop==='action'"
          >
            <el-button
              type="primary"
              @click="show(row._id)"
            >{{$t('article.show')}}</el-button>
            <el-button
              type="danger"
              @click="del(row._id)"
            >{{$t('article.remove')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :total="total"
        :current-page="Number(page)"
        :page-size="Number(size)"
        :page-sizes="[2, 5, 10, 20]"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getArticleRanking, deleteArticle } from '@/api/article'
import { dynamicData, checkedData, tableColumn } from './dynamic'
import { initSortTable, tableRef } from './sortable'
import { watchSwitchLang } from '@/utils/i18n'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'

const router = useRouter()
const articleData = ref([])
const total = ref(0)
const page = ref(1)
const size = ref(10)
// 获取文章排名
const init = async () => {
  const data = await getArticleRanking({ page: page.value, size: size.value })
  articleData.value = data.list
  total.value = data.total
  page.value = data.page
  size.value = data.size
}
init()
watchSwitchLang(init)
onMounted(() => {
  initSortTable(articleData, init)
})

// 查看文章
const show = (id) => {
  router.push(`/article/${id}`)
}

// 删除文章
const i18n = useI18n()
const del = async (id) => {
  await deleteArticle(id)
  ElMessage.success(i18n.t('article.removeSuccess'))
  init()
}

// 改变页码
const handleCurrentChange = (currentPage) => {
  page.value = currentPage
  init()
}
// 改变显示条数
const handleSizeChange = (currentSize) => {
  size.value = currentSize
  init()
}

</script>

<style lang="scss" scoped>
.article-ranking-container {
  .header {
    margin-bottom: 20px;
    .dynamic-box {
      display: flex;
      align-items: center;
      .title {
        margin-right: 20px;
        font-size: 14px;
        font-weight: bold;
      }
    }
  }

  :deep(.el-table__row) {
    cursor: pointer;
  }

  .pagination {
    margin-top: 20px;
    justify-content: center;
  }
}
:deep(.sortable-ghost) {
  opacity: 0.6;
  color: #fff !important;
  background: #304156 !important;
}
</style>
